import { Button, Form, Input, Modal, Space, Switch, Table, Tag } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { useAddKey } from '@/pages/hooks/index';
import type { ColumnsType } from 'antd/es/table';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}

export const SandTable = (props: any) => {
  const [tit, setTit] = useState('新建');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [id, setId] = useState('');
  const [form] = Form.useForm();
  useEffect(() => {
    props.dispatch({ type: 'house/int' });
  }, []);
  const onChange = (key: string) => {
    console.log(key);
  };
  // 添加
  const add = () => {
    setIsModalOpen(true);
    setTit('新建');
  };

  useEffect(() => {
    if (tit === '新建') {
      form.setFieldsValue({
        floor_num: '',
        title: '',
        sale_status: '',
        status: '',
      });
    }
  }, [tit]);

  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const onFinish = (values: any) => {
    console.log('Success:', values);
    if (tit === '新建') {
      props.dispatch({ type: 'house/ADDSAND', values });
    } else {
      props.dispatch({ type: 'house/EDITSAND', values, id });
    }

    setIsModalOpen(false);
  };

  const del = (item: any) => {
    props.dispatch({ type: 'house/DELSAND', item });
  };

  const edit = (item: any) => {
    setIsModalOpen(true);
    console.log(item);

    setTit('编辑');
    setId(item.id);
    form.setFieldsValue({
      floor_num: item.floor_num ? item.floor_num : 10,
      title: item.title,
      sale_status: item.sale_status,
      status: item.status,
    });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: `Tab 1`,
      children: (
        <img
          src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
          alt=""
        />
      ),
    },
    {
      key: '2',
      label: `Tab 2`,
      children: (
        <img
          src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
          alt=""
        />
      ),
    },
    {
      key: '3',
      label: `Tab 3`,
      children: (
        <img
          src="https://img2.baidu.com/it/u=345670089,3951600800&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
          alt=""
        />
      ),
    },
  ];
  const columns: ColumnsType<DataType> = [
    {
      title: '楼栋名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '楼层数',
      dataIndex: 'floor_num',
      key: 'floor_num',
      render: (item) => {
        return item ? item : 10;
      },
    },
    {
      title: '销售状态',
      dataIndex: 'sale_status',
      key: 'sale_status',
      render: (item) => {
        return item ? '在售' : '停售';
      },
    },

    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (item) => {
        return <Switch defaultChecked={item ? true : false} />;
      },
    },
    {
      title: '操作',
      render: (_, record) => (
        <Space size="middle">
          <Button type="ghost">添加</Button>
          <Button type="primary" onClick={() => edit(record)}>
            编辑
          </Button>
          <Button onClick={() => del(record)} type="primary" danger>
            删除
          </Button>
        </Space>
      ),
    },
  ];
  return (
    <div className="sand-box">
      <div>
        <Button onClick={add}>添加楼盘</Button>
        <Table
          className="tables"
          columns={columns}
          dataSource={useAddKey(props.list)}
        />
      </div>

      <div className="canva">
        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      </div>

      <Modal
        title={tit}
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          form={form}
        >
          <Form.Item
            label="楼栋名称"
            name="title"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="楼层数"
            name="floor_num"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="销售状态"
            name="sale_status"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="状态"
            name="status"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

const mapStateToProps = (state: any) => {
  console.log(state);

  return {
    list: state.house.sandList,
  };
};

export default connect(mapStateToProps)(SandTable);
